<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :isshowconfirmbtn="false"
    :dialogWidth="'40%'"
    :enterTitle="false"
    :isshowimportTitle="false"
    :dialogTitle="'扫码支付'"
    :isshowFooter="false"
    @closetextDialog="closetextDialog"
    :topHeight="'25vh'"
  >
    <div class="innerloding">
      <el-form ref="elForm" :model="formData" size="medium" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品订单：">
              {{ dialogparams.order_num }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付金额：">
              <span class="money">￥{{ dialogparams.total_fee }}</span>
              <span class="orderdetail" @click="showDetail">
                订单详情
                <i class="el-icon-caret-bottom" v-if="isShowDetail"></i>
                <i class="el-icon-caret-top" v-else></i>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="!isShowDetail">
            <el-form-item label="">
              <div class="detailsText">
                <p>商品名称：{{ dialogparams.title }}</p>
                <p>订单内容：{{ dialogparams.content }}</p>
                <p>应付金额：￥{{ dialogparams.total_fee }}</p>
                <p>购买时间：{{ dialogparams.date }}</p>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付方式：">
              <span v-for="(p, i) in payType" :key="i">
                <span
                  :class="
                    currentIndex == i ? 'taocanItem acItem' : 'taocanItem'
                  "
                  @click="chooseItem(i, p)"
                >
                  <img
                    :src="p.imgUri"
                    alt=""
                    style="width: 24px; height: 24px"
                  />
                  <span>{{ p.title }}</span>
                </span>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="">
              <el-col :span="8">
                <div class="codeBox">
                  <el-image :src="wechatUrl">
                    <div slot="error" class="image-slot">
                      <img
                        src="https://oss.juchehulian.com/question_bank/20210630/ca17385a8a2dcefdc6cc8db4c657f6b.png"
                        alt=""
                      />
                    </div>
                  </el-image>
                  <span :class="currentIndex==0?'tips':'alitips'" v-if="wechatUrl!=''">{{currentIndex==0?'请打开微信，扫一扫完成支付':'请打开支付宝，扫一扫完成支付'}}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <el-image
                  :src="currentIndex==0?'https://oss.juchehulian.com/question_bank/20210701/ep_sys_wx_tip.jpg':'https://oss.juchehulian.com/question_bank/20210701/A_KlAPTbO_zAUAAAAAAAAAAAAAARQnAQ.png'"
                  fit="contain"
                  style="width:200px"
                ></el-image>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </commonformdialog>
</template>

<script>
//引入弹窗
import commonformdialog from '@/components/commondialog/commondialog'
import { getSessionStorage } from '@/utils/accessToken'
//api
import { packageSetting } from '@/api/activity'
export default {
  data() {
    return {
      //表单数据
      formData: {},
      currentIndex: 0,
      currentType: null,
      isShowDetail: true,
      payType: [
        {
          title: '微信支付',
          imgUri:
            'https://oss.juchehulian.com/question_bank/20210701/icon-2(2).svg',
          type: 'wechat',
        },
        {
          title: '支付宝支付',
          imgUri:
            'https://oss.juchehulian.com/question_bank/20210701/icon-1(2).svg',
          type: 'ali',
        },
      ],
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
    },
    wechatUrl: {
      type: String,
      default: '',
    },
    //点击传递的参数
    dialogparams: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  methods: {
    //关闭弹窗
    closetextDialog() {
      ;(this.isShowDetail = true), (this.currentIndex = 0)
      this.$emit('closedefer')
    },
    showDetail() {
      this.isShowDetail = !this.isShowDetail
    },
    chooseItem(i, p) {
      this.currentIndex = i
      this.currentType = p.type
      
      if (p.type == 'wechat') {
        this.$parent.getwechatpayNative(this.dialogparams.order_id)
      } else if (p.type == 'ali') {
        this.$parent.getalipayNative(this.dialogparams.order_id)
      }
    },
  },

  mounted() {},
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-image {
     width: 100%;
    .image-slot {
      width: 100%;
      background-color: #f4f4f4;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 50px;
        height: 50px;
      }
    }
  }
  .formDialogcontent .el-form-item {
    margin-bottom: 10px !important;
  }
}
.codeBox{
   display: flex;
   flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .tips{
        font-size: 12px;
        background-color: #12b906;
        color: #fff;
        width: 100%;
        text-align: center;
      }
      .alitips{
         font-size: 12px;
        background-color: #02a9f1;
        color: #fff;
        width: 100%;
        text-align: center;
      }
}
.innerloding {
  min-height: calc(70vh - 124px);
}
.money {
  font-size: 22px;
  font-weight: bold;
  color: #4c68ef;
}
.orderdetail {
  margin-left: 20px;
  cursor: pointer;
}
.taocanItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  border: 1px solid #f4f4f4;
  float: left;
  img {
    margin-right: 10px;
  }
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.acItem {
  border: 1px solid #4c68ef;
  position: relative;
  &::after {
    position: absolute;
    content: '';
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: url('../../../../assets/sanjiao.png') no-repeat;
    background-size: 100%;
    z-index: 2022;
  }
}
.detailsText {
  p {
    line-height: 12px;
  }
}
</style>
